<template>
  <view class="addaddress">
    <view class="item">
      <input type="text" placeholder="姓名" v-model="userName">
    </view>
    <view class="item">
      <input type="text" placeholder="手机号码" v-model="telNumber">
    </view>
    <view class="item">
      <picker mode="region" @change="bindRegionChange" :value="region" :custom-item="customItem">
        <input type="text" placeholder="身份、城市、区县" v-model="address">
      </picker>
    </view>
    <view class="item">
      <input type="text" placeholder="详细地址，如楼道、楼盘号等" v-model="detailaddress">
    </view>

    <view class="item itemend">
      <checkbox-group @change="checkboxChange">
        <label class="checkbox">
          <checkbox class="box" value="true" :checked="checked" color="#b4282d"></checkbox>
          设置为默认地址
        </label>
      </checkbox-group>
      <view @click="wxaddress">一键导入微信</view>
    </view>

    <view class="bottom" @click="saveAddress">保存</view>
  </view>
</template>

<script>
	export default {
		data() {
			return {
				userName: '',
				telNumber: '',
				region: [],
				customItem: '全部',
				address: '',
				detailaddress: '',
				checked: false,
				openId: '',
				res: '',
				id: ''
			}
		},
		onLoad(option) {
			if(option.res){
				this.res = JSON.parse(decodeURIComponent(option.res))
				console.log(this.res)
				this.userName = this.res.userName
				this.telNumber = this.res.telNumber
				this.address = `${this.res.provinceName} ${this.res.cityName} ${this.res.countyName}`
				this.detailaddress = this.res.detailInfo
			}
			if(option.id){
				this.id = option.id
				this.getDetail()
			}
		},
		mounted() {
			this.openId = uni.getStorageSync('openId')
		},
		methods: {
			checkboxChange(e){
				this.checked = e.detail.value[0]
			},
			bindRegionChange(e){
				let value = e.detail.value
				this.address = `${value[0]} ${value[1]} ${value[2]}`
			},
			wxaddress(){
				uni.chooseAddress({
					success: (result) => {
						this.userName = result.userName
						this.telNumber = result.telNumber
						this.address = `${result.provinceName} ${result.cityName} ${result.countyName}`
						this.detailaddress = result.detailInfo
					}
				})
			},
			async getDetail(){
				const data = await this.$request({
					url:'/address/detailAction',
					data:{
						id:this.id
					}
				})
				console.log(data)
				this.userName = data.data.data.name
				this.telNumber = data.data.data.mobile
				this.address = data.data.data.address
				this.detailaddress = data.data.data.address_detail
				this.checked = data.data.data.is_default === 1 ? true : false
			},
			async saveAddress(){
				const data = await this.$request({
					url:'/address/saveAction',
					method:'POST',
					data:{
						userName: this.userName,
						telNumber: this.telNumber,
						address: this.address,
						detailaddress: this.detailaddress,
						checked: this.checked,
						openId: this.openId,
						addressId: this.id	
					}
				})
				console.log(data)
				if(data.data){
					uni.showToast({
						title:"添加成功",
						icon:"success",
						duration:1500,
						mask:true,
						success() {
							uni.navigateBack({
								delta:1
							})
						}
					})
				}
			}
		}
	}
</script>

<style lang="scss">
.addaddress {
  position: absolute;
  width: 100%;
  height: 100%;
  background: #fff;
  .item {
    width: 690rpx;
    height: 70rpx;
    line-height: 70rpx;
    margin: 0 auto;
    padding: 10rpx 0;
    border-bottom: 1rpx solid #f4f4f4;
    input {
      width: 100%;
      height: 100%;
    }
  }
  .itemend {
    margin-top: 40rpx;
    display: flex;
    justify-content: space-between;
    border: none;
    view:nth-child(2) {
      color: green;
    }
  }
  .bottom {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    text-align: center;
    height: 100rpx;
    line-height: 100rpx;
    background: #B4282D;
    color: #fff;
    font-size: 32rpx;
  }
}
</style>
